vue-router怎么动态配置，比如根据用户权限不同显示路由
1、vue-router怎么动态配置，比如根据用户权限不同显示路由如上图，我想根据用户权限不同，动态添加删除菜单下面是路由配置const routes = [ { path: '/', component: Home, name: '系统管理', iconCls: 'el-icon-setting', children: [ { path: '/Page12', component: Page12, name: '组织机构' }, { path: '/...
2024-01-10
vue-router路由导航守卫中next控制实现
使用 vue-router 的导航守卫钩子函数，某些钩子函数可以让开发者根据业务逻辑，控制是否进行下一步，或者进入到指定的路由。例如，后台管理页面，会在进入路由前，进行必要登录、权限判断，来决定去往哪个路由，以下是伪代码：// 全局导航守卫router.beforEach((to, from, next) => {if('no login'){next(...
2024-01-10
Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save2.在首页index.html中引入百度地图: <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script> 我申请的**为 ：3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD3.在显示地图的组件中 template 中： <div class="baidumap" id="a...
2024-01-10
请问使用vue-router与v-show分别实现选项卡有什么区别？
我们开发项目，无论是后台管理系统，还是移动应用，经常会使用到各式各样类似选项卡的切换组件，如下：1、管理后台：2、选项卡：3、移动端底部tabber:问题如下：1、实现这种类选项卡组件有2中方法：分别是 vue-router的嵌套路由 和 v-show, 请问2种实现有什么区别（个人看不出区别），来回切换时，能否缓存原本查看的内容呢？什么时候使用vue-router的嵌套路由，什么时候使用v-sh...
2024-03-14
vue-router 基础
安装NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)如果使用全局的 script 标签，则无须如此（手动安装）。开始用Vue.js+vue-router创建单页应用，是非常简单的。使用Vue.js,我们已...
2024-01-10
vue钩子函数mounted,页面回退时不执行
一、问题描述目前在做一个电商项目，在商品列表list点击item商品的查看详情按钮时，首次进入详情页，页面会进行渲染，钩子会走mounted,但回退之后，再点击其他商品详情，详情页不会进行更新渲染。问题代码如下：商品列表页：商品详情页：二、解决办法将钩子mounted的操作放入钩子activated，...
2024-01-10
vue--vuex详解
Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 为什么要用Vue...
2024-01-10
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
最近用vue写项目的时候碰到一个问题，在同一个页面下跳转，路由地址不变，路由参数有变化，一开始只是在data里取路由的参数，发现根本取不到变化的路由参数。在网上查找了一番后发现可以这样写：watch: { '$route' (to, from) { //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行...
2024-01-10
Vue-router插件使用
Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更新该怎么做？Vue中采用锚点来完成。 如访问http://127.0.0.1#/index就是主页，而访问http://127.0.0.1#/home就是家目录。 手动分析url组成与处理视图的切换非常麻烦，所以Vue提供插件Vue-router，它能够根据用户...
2024-01-10
解决vue-router路由拦截造成死循环问题
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置const router = new Router({routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, children: [{...
2024-01-10
vue 项目引入echarts 添加点击事件操作
main.js中import echarts from 'echarts'Vue.prototype.$echarts = echartsvue文件中_this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar'))_this.calendarChart.on('click',function (param) { console.log(param)}) _this.calendarChart...
2024-01-10
where和having区别：
where和having区别：having只能用在group by之后，对分组后的结果进行筛选(即使用having的前提条件是分组)。where肯定在group by 之前，即也在having之前。where后的条件表达式里不允许使用聚合函数，而having可以。Where是一个约束声明，在查询数据库的结果返回之前对数据库中的查询条件进行约束，即在结果...
2024-01-10
使用Vue、React和Koa开发个人博客
前言实习了大半年，又临近毕业，一直想做一个属于自己的博客。于是就用Vue、React和Koa开发了一个服务端渲染的博客系统。其中： - 后端管理使用Vue开发 - 前端页面使用React服务端渲染框架nextjs - 接口服务使用Koa2 + mongodb + mongoose（使用nodemailer当接口发生500时向我发送邮件通知）项目地址是点我访...
2024-01-10
React:快速上手(5)——掌握Redux(2)
本文部分内容参考阮一峰的Redux教程。React-Redux原理React-Redux运行机制 我觉得这张图清楚地描述React-Redux的运行机制： React-Redux将组件划分为两类，第一类是UI组件：只负责 UI 的呈现，不带有任何业务逻辑没有状态（即不使用this.state这个变量）所有数据都由参数（this.props）提供不使用任...
2024-01-10
React和Vue区别
1.监听数据变化的实现原理不同Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强...
2024-01-10Vue.directive使用注意(小结)
指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作 DOM 。binding：一个对象，包含以下属性：vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 ◦name：指令名，不包括 v- 前缀。◦value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。◦oldValue：指令...
2024-01-10
Vue页面切换和a链接的本质区别详解
Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转，这和传统的<a href="path" rel="external nofollow" ></a>何其相似！但它们到底有什么具体的区别呢？对比<a>，Link组件避免了不必要...
2024-01-10Vue之Watcher源码解析（1）
上一节最后再次调用了mount函数，我发现竟然跳到了7000多行的那个函数，之前我还说因为声明早了被覆盖，看来我错了！就是这个函数：// Line-7531 Vue$3.prototype.$mount = function(el, hydrating) { el = el && inBrowser ? query(el) : undefined; return mountComponent(this, el, hydrating) };第一步query就不用看了，el此时是一...
2024-01-10vue reactive 中的数据为什么不能等于另外一个？
const data = reactive({ name: {id: 1, title: 'AAAAA'}, new1: data.name, new2: JSON.parse(JSON.stringify(data.name))})data.name 和 JSON.parse(JSON.stringify(data.name)) 都不可以，为什么？只能在 reactiv...
2024-02-07
不吹不黑丨用Vue和React构建相同应用程序，区别在哪？
作者 | Sunil Sandhu译者 | 无明在工作中使用了 Vue 之后，我已经对它有了相当深入的了解。同时，我也对 React 感到好奇。我阅读了 React 的文档，也看了一些教程视频，虽然它们很棒，但我真正想知道的是 React 与 Vue 有哪些区别。这里所说的区别，并不是指它们是否都具有虚拟 DOM 或者它们如何渲染页面...
2024-01-10详解vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发//在父组件里使用子组件<son-tmp> <div>我是文字，我需要放到son-tmp组件里面制定的位置</div></son-tmp>单个插槽父组件app.vue<template> <div id="app"> <test-slot> <span>我是父组件里的文字，但是我要被放到子组件里</span> </test-slot> </div> </template> <scrip...
2024-01-10
Vue.observable
1.介绍：如果项目不是足够大的话，为避免代码繁琐冗余，最好不要使用它。Vue.observable 是vue2.6版本新增的，可以实现一些简单的跨组件数据状态共享// 创建store目录，store目录下创建index.jsimport Vue from 'vue'export const store = Vue.observable({ count: 0, name: '李四'})export const mutations = { setCount (count) { st...
2024-01-10
关于vue slot组件以及v-slot指令的一些思考
前言本文只讨论vue2.6.x以上的版本。以前的API已经被depreciated，详见官方文档官方文档已经描述的足够清晰和简单，我只是通过用图例的方式加强印象开门见山vue的slot也就内容分发，仔细思考这个名字就不难发现，他是将父组件的内容分发到子组件中的多个<slot></slot>组件中。所以下图形象描述了...
2024-01-10
【前端】使用vue的slot传递问题
目录结构: 需求: 编写一个table组件(类似iview的table),table-body组件中需要做个树形展示功能,其中一种实现是想通过在table-body设置slot标签,让用户直接在app的table标签里面写上相应代码就可以展示相应内容,预览图: 问题: 这是app的HTML代码(swTable就是table组件):table-body 代码: 这中间隔着一个table.vue,请问怎么...
2024-01-10
vue中的slot与slot-scope
实际上，插槽的概念很简单，下面通过分三部分来讲。这个部分也是按照vue说明文档的顺序来写的。进入三部分之前，先让还没接触过插槽的同学对什么是插槽有一个简单的概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心...
2024-01-10
vue---splitpane分割
首先安装：npm install vue-splitpane引入使用：import splitPane from 'vue-splitpane'Vue.component('split-pane', splitPane);分割成两列<split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical"> <template slot="paneL"> A </template> <temp...
2024-01-10
vue-devtools下载与使用
网盘地址提取码：ty1m如果地址过期了，可以到csdn下载：csdn地址1.安装我们打开chrome的扩展程序，讲刚下载的文件拖进去，就可以安装了。2.更改一些配置首先打开chrome的开发者模式，然后允许vue-devtool在隐身模式使用，和允许访问网址。改好之后，还需要修改插件的一个配置，找到插件的安装目...
2024-01-10
vue slot+传参
插槽分为默认插槽和具名插槽：默认插槽： //父组件<div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild></div>//子组件<div> <h4>子组件</h4> <slot></slot></div>具名插槽： 注意：具名插槽需要包裹在 template 标签中，否则会报错//父组件<div> <h3>父组件</h3> <tes...
2024-01-10
Vue.js03：v-model实现简易计算器
v-model用于数据的双向绑定。bug不少，凑合看吧，主要是练习v-model。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</...
2024-01-10vue实现留言板todolist功能
通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.第一步、使用bootstrap做好布局<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="lib/jquery-1.7.2.js"></...
2024-01-10
